<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lzy">
    <title>lzy-</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            height: 1600px;
            background-color: blanchedalmond;
        }
        button{
            position: absolute;
            top: 1600px;
            width: 100px;
            height: 50px;
            left: calc(50% - 50px);
        }
        #main{
            width: 400px;
            height: 200px;
            background-color: white;
            text-align: center;
            cursor: pointer;
        }
        input{
            display: inline-block;
            width: 200px;
            margin-top: 10px;
        }
        span{
            display: inline-block;
        }
        #main .outer span{
            width: 100px;
        }
        #main .outer .btn{
            background-color: gray;
            text-align: center;
            height: 30px;
            width: 250px;
            font-size: 18px;
        }
        #main .header{
            background-color: lightgrey;
            height: 40px;
            line-height: 40px;
        }
        #main .header span{
            float: right;
            margin-right: 10px;
        }
        #main .outer{
            margin-top: 30px;
        }
        #main{
            position: absolute;
            display: none;
        }
    </style>
</head>
<body>
    <button type="button">来点我</button>
    <div id="main">
        <div class="header">用户登录 <span>✘</span></div>
        <div class="outer">
            <span>账号:</span><input type="text" placeholder="请输入用户名">
            <span>密码:</span><input type="text" placeholder="请输入密码">
            <input type="text" value="登录" class="btn">
        </div>
    </div>
</body>
</html>
<!--弹窗居中
left = 页面宽 - 弹窗宽/2 + 滚动条的left
top = 页面高 - 弹窗高/2 + 滚动条的top

弹窗移动
使用move,获取鼠标在弹窗上的位置，然后使用绝对定位来改变top和left值就可以移动-->
<script>
    show();
    function show(){
        var winheight=$(window).height();
        var scrtop=$(window).scrollTop();
        var winwidth=$(window).width();
        var scrleft=$(window).scrollLeft();
        var top=(winheight - 200)/2 + scrtop;
        var left=(winwidth -400)/2 +scrleft;
        $('#main').css({
            top:top+'px',
            left:left+'px',
        })
    }

    $(window).scroll(function(){
        show();
    });

    $('#main').mousedown(function(ev){      
    $('#main').mousemove(function(ev){
        // console.log(ev.pageX);
        // console.log('width:'+$(window).width());
        // console.log(ev.pageY);
        var left=ev.pageX+202;
        // console.log(left);
        if(left>$(window).width() || left<402){
            if(left>$(window).width()){
                // console.log($(window).width());
                $('#main').css({
                    // left:$(window).width()+'px',
                    right:0+'px',
                    top:ev.pageY - 50 +'px',
                })
                return;
            }
             
            if(left<402){
                // console.log(left);
                $('#main').css({
                    top:ev.pageY - 50 +'px',
                    'left':'0px',                  
                })
                return;
            }
            // $('#main').off('mousemove');
        }
        var top = ev.pageY +150;
        var winheight=$(window).height();
        var scrtop=$(window).scrollTop();
        var toph=Number(winheight)+Number(scrtop);
        // console.log(top);
        // console.log(Number(winheight)+Number(scrtop));
         if(top<202 || top>toph){
            if(top<52){ 
                $('#main').css({
                    'top':'52px',
                    left:ev.pageX - 200 +'px'
                })
                return;
            }
            if(top>toph){
                $('#mian').css({
                    top:toph + 'px',
                    left:ev.pageX - 200 +'px'
                })
                return;
            }
            // $('#main').off('mousemove');
        }

        else{
            // console.log(456);
            $('#main').css({
                top:ev.pageY - 40 +'px',
                left:ev.pageX - 205 +'px',
            })
        }
    })        


    })

    $('#main').mouseup(function(ev){
        $('#main').css({
            top:ev.pageY - 50 +'px',
            left:ev.pageX - 200 +'px',
        })
        $('#main').off('mousemove');
    })

    $(':button').click(function(){
        $('#main').show();
    })


    $('#main .header span').click(function(){
        $('#main').hide();
        show();
    })
</script>